<script setup lang="ts">
import { ref } from 'vue'

const isShow = ref(false)

const age = ref(4)
</script>

<!-- 结构 -->
<template>
  <div>
    <button @click="isShow = !isShow">切换图片显示</button>
  </div>
  <h2>v-show</h2>
  <!-- v-show的本质 是通过修改样式的方式(display:none) 控制显示隐藏,元素始终在页面上存在 -->
  <img
    v-show="isShow"
    src="https://pic2.zhimg.com/v2-87a927c971b5715f46a12dbeb132ff89_1440w.jpg"
    alt=""
  />
  <h2>v-if</h2>
  <!-- v-if的本质 从页面中移除或者添加 dom 元素(比较耗费性能),频繁切换的元素推荐用v-show -->
  <img
    v-if="isShow"
    src="https://pic2.zhimg.com/v2-87a927c971b5715f46a12dbeb132ff89_1440w.jpg"
    alt=""
  />
  <button @click="age += 2">年纪:{{ age }}</button>
  <h3 v-if="age < 5">玩泥巴</h3>
  <h3 v-else-if="age >= 5 && age < 18">偷摸去网吧</h3>
  <h3 v-else>光明正大去</h3>
</template>

<!-- 样式 -->
<style scoped>
img {
  width: 200px;
  height: 200px;
}
</style>
